<template>
  <div class="menu_content">

    <div v-for="item in data" :key="item.id" class="menu_list">
      <span>{{ item.title }}</span>
      <draggable
        :list="item.img"
        :options="attrGroups"
        :clone="cloneDog"
        @change="log"
        @start="isDragging = true"
        @end="isDragging = false"
      >
        <img v-for="srcItem in item.img" :key="srcItem.id" :src="require('@/assets/'+srcItem.src+'.jpg')">
      </draggable>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import { mapGetters } from 'vuex'
import { uuid, deepCopy } from '@/js/common'

export default {
  name: 'MenuContent',
  components: {
    draggable
  },
  computed: {
    ...mapGetters([
      'attrGroups'
    ])
  },
  props: {
    data: {
      type: Array
    }
  },
  data() {
    return {
      isDragging: false
    }
  },
  mounted() {},
  methods: {
    cloneDog(e) {
      let viewsRush = {}
      viewsRush = deepCopy(e)
      viewsRush.id = uuid()
      viewsRush['checked'] = false
      return viewsRush
    },
    log(e) {
      console.log(e)
    }
  }
}
</script>

<style scoped lang="scss">
   .menu_content {
      width: 220px;
      overflow-y: auto;
      height: auto;
      background: rgb(250,250,250);
      .menu_list {
         margin: 24px 24px 32px;
         span {
            color: #333;
            font-size: 16px;
            white-space: nowrap;
         }
         img {
            max-width: 100%;
            max-height: 100%;
            margin-top: 16px;
            cursor: pointer;

            display: inline-block;
            font-size: 0;
            border-radius: 4px;
            box-shadow: 0 2px 6px 0 rgba(0,0,0,.1);
         }
         img:hover {
            transform: scale(1.05);
            transition: all .1s ease-in-out;
         }
      }
   }
</style>
